<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <TodoHeader :addTodo="addTodo"/>
      <TodoList :todos="todos" :delTodo="delTodo"/>
      <TodoFooter :deleteCompleteTodos="deleteCompleteTodos" :selectAll="selectAll" :todos="todos"/>
    </div>
  </div>
</template>

<script>


import TodoHeader from "./components/TodoHeader";
import TodoList from "./components/TodoList";
import TodoFooter from "./components/TodoFooter";

export default {

  name: "App",
  components: {TodoFooter, TodoList, TodoHeader},
  data() {
    return {
      todos: JSON.parse(window.localStorage.getItem("todos_key") || '[]')
    }
  },
  methods: {
    addTodo(item) {
      this.todos.unshift(item)
    },
    delTodo(index) {
      this.todos.splice(index, 1)
    },
    deleteCompleteTodos() {
      this.todos = this.todos.filter(todo => !todo.complete)
    },
    selectAll(isSelectAll) {
      this.todos.forEach(todo => {
        todo.complete = isSelectAll
      })
    }
  },
  watch: {
    todos: {
      deep: true,
      handler(value) {
        window.localStorage.setItem('todos_key',value)
      }
    }
  }
}
</script>

<style scoped>

/*app*/
.todo-container {
  width: 600px;
  margin: 0 auto;
}

.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

</style>
